<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div>
        <h1>{{ sel }}</h1>
        <select v-model="sel" class="sel">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>

        <hr>

        <h1>{{ num }}</h1>
        <input type="checkbox" value="111" v-model="num">111
        <input type="checkbox" value="222" v-model="num">222
        <input type="checkbox" value="333" v-model="num">333
        <input type="checkbox" value="444" v-model="num">444
        <input type="checkbox" value="555" v-model="num">555

        <hr>

        <h1>{{ cc }}</h1>
        <input type="radio" name="aa" value="111" v-model="cc">111
        <input type="radio" name="aa" value="222" v-model="cc">222
        <input type="radio" name="aa" value="333" v-model="cc">333
        <input type="radio" name="aa" value="444" v-model="cc">444
        <input type="radio" name="aa" value="555" v-model="cc">555

        <hr>

        <h1>{{ info }}</h1>
        <textarea name="" id="" cols="30" rows="2" v-model="info"></textarea>

    </div>
</template>



<script>

export default {
    data() {
        return {
            sel: "",
            num: [],
            cc: '',
            info: '',
        }
    },
    methods: {

    }
}


</script>


<style>
body {
    margin: auto 0;
    padding: 0;
}

.sel {
    height: 30px;
    width: 30px;
}
</style>